<link rel="stylesheet" href="/web/lib/swiper-2.7.6.css">
<style type="text/less">
    @import "/web/public/public.less";
    .banner{
        width: 100%;
        height: 300px;
        .swiper-slide{
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                width: 100%;
                position: absolute;
                color: #ffffff;
                top: 240px;
                left: 0;
                line-height: 60px;
                font-size: 20px;
                padding-left: 10px;
                .bg('/web/img/banner-bg.png');
                background-size: 100%;
            }
        }

        .pagination {
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 100%;
            text-align: right;
            padding-right: 20px;
        }
        .swiper-pagination-switch {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 8px;
            background: #A8A8A8;
            margin: 0 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .swiper-active-switch {
            width: 21px;
            background: #fff;
        }
        .swiper_btn{
            width: 40px;
            height: 70px;
            position: absolute;
            top: 50%;
            margin-top: -35px;


            &.swiper-button-prev{
                left: 0;
                .bg('/web/img/slider-arrow.png');
                transform: rotate(180deg);
            }
            &.swiper-button-next{
                right: 0;
                .bg('/web/img/slider-arrow.png');
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div class="banner swiper-container">
        <div class="swiper-wrapper">
            <#list list as info>
                <div class="swiper-slide">
                    <#if info.articleOutLinkStatus == 1>
                        <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                        </a>
                    <#else>
                        <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                        </a>
                    </#if>
                    <div class="title">
                        <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">${info.articleTitle}</a>
                    </div>
                </div>
            </#list>
        </div>
        <div class="pagination"></div>
        <div class="swiper-button-prev swiper_btn"></div>
        <div class="swiper-button-next swiper_btn"></div>
    </div>
</#if>
<script src="/web/lib/swiper-2.7.6.min.js"></script>
<script>
    $(function () {
        var slidIndex = sessionStorage.getItem('slidIndex')?parseInt(sessionStorage.getItem('slidIndex')):0;
        slidIndex = slidIndex<$('.banner .swiper-wrapper .swiper-slide').length-1?slidIndex+1:0;
        sessionStorage.setItem('slidIndex',slidIndex);
        var mySwiper = new Swiper('.banner.swiper-container',{
            loop: true,
            autoplay: false,
            initialSlide:slidIndex,
            pagination : '.banner .pagination',
            paginationClickable:true,
            onSlideChangeEnd: function(e){
                slidIndex = e.activeLoopIndex;
                sessionStorage.setItem('slidIndex',slidIndex);

            },
        });
        $('.banner .swiper-button-prev').on('click', function(e){
            e.preventDefault()
            mySwiper.swipePrev();
        });
        $('.banner .swiper-button-next').on('click', function(e){
            e.preventDefault()
            mySwiper.swipeNext();
        });
    })
</script>
